<template>
<div class="ui form">
    <div class="ui red message" v-if='fileds.length==0'><i class="warning circle icon"></i>规格配置不能为空，请在商品类型中添加。</div>
	<tFields @onsubmit="onsubmit" @oncancel="oncancel" @onchange="onchange" :data="[alias_name]" :nosubmit="nosubmit"></tFields></br>
	<tFields @onsubmit="onsubmit" @oncancel="oncancel" @onchange="onchange" :data="fileds" :nosubmit="nosubmit"></tFields>
</div>
</template>
<script>
import tool from 'src/util/tool';
import util from '_util/index';
import logic from '_logic';

import tTable from 'components/tunit/tTable';
import tFields from 'components/tunit/tFields';

// import latlonMap from 'components/tunit/tmodel/latlonMap';

export default {
    data() {
        return {
            val: null,
            name: "",
            nosubmit: true,
            productData: {},
            componentName: "",
			alias_name: {
				label: "销售别名",
				name: "alias_name",
				value: '',
				is_must:true,
				show_type:'input',
				maxlength:60
			},
            fileds: []
        }
    },
    computed: {
        editData() {
            // return this.$store.state.editVo || {};
            return this.$store.state.global.editVo || {};
        },
        productUnitVo() {
            // return this.$store.state.productUnitVo || {};
            return this.$store.state.global.productUnitVo || {};
        }
    },
    components: {
        tTable,
        tFields,
        // latlonMap
    },
    watch: {},
    methods: {
        /* 数据操作 */
        getData({
            url = [],
            data = {},
            callback = null,
            error = false,
            msg = null
        }) {
            url = tool.getApi(this, url[0], url[1]);
            util.http.SR(this, url, data, msg, callback, error);
        },
        hidePop() {
            this.isshow = false;
        },
        showPop() {
            this.isshow = true;
        },
        /*返回 true 为 添加成功， 返回false 为更新成功*/
        getStateData() {
            let _this = this,
                keyarr = _this.editData.attr || [];
            keyarr.forEach(item => {
				item.value = _this.params.data[1][item.attr_id].value || item.value
                let dat = {
                    id: item.attr_id * 1,
                    label: item.attr_name,
                    element: [].concat(item.values),
                    value: item.value,
                    is_must: item.is_must,
                    name: `attr_${item.attr_id}`,
                    sort: item.sort,
					maxlength:20
                }
                if (!(dat.is_must * 1) || item.allow_custom * 1) {
                    dat.element.push('未选择');
                }
                dat.value == '' ? dat.value = '未选择' : null;
                if (item.allow_custom * 1 && item.show_type * 1 === 5) {
                    dat.show_type = 'select_coustom';
                } else {
                    dat.show_type_code = item.show_type * 1
                }
                _this.fileds.push(dat);
                _this.productData[item.attr_id] = {
                    attr_id: item.attr_id,
                    value: item.value,
                    label: item.attr_name,
                    sort: item.sort,
					maxlength:20,
                    is_must: item.is_must
                }
            })
			this.fileds.sort((a, b)=>{
			  return a.sort > b.sort;
			});
        },
		getOldName(){
			this.alias_name.value = this.params.data[0].alias_name.value
		},
        getUnitData(pid) {
            let _this = this;
            if (_this.productUnitVo[2]) {
                this.initUnitData(_this.productUnitVo[2])
            } else {
                _this.getData({
                    url: ['Product', 'getTypeAttrConf'],
                    data: {
                        pid: pid
                    },
                    callback(rs) {
                        _this.initUnitData(rs[2]);
                    }
                })
            }
        },
        initUnitData(productUnitData) {
            let keyarr = [],
                _this = this;
            if (_this.params.data[1]) {
                keyarr = Object.keys(_this.params.data[1])
            }
            if (productUnitData) {
                productUnitData.forEach(item => {
                    /*if(type===2)*/
                    let inkey = keyarr.indexOf(item.id) + 1;
                    let filedsData = {
                        id: item.id,
                        label: item.title,
                        is_must: item.is_must,
                        sort: item.sort,
                        name: `attr_${item.id}`,
                        element: ['未选择'].concat(item.value),
                        value: inkey !== 0 ? _this.params.data[1][item.id].value : '未选择',
						maxlength:20,
                    }
                    if (item.allow_custom * 1 && item.show_type * 1 === 5) {
                        _this.fileds.push({
                            ...filedsData,
                            show_type: 'select_coustom',
                        })
                    } else {
                        if (item.is_must) {
                            filedsData.element = item.value;
                            filedsData.value = inkey !== 0 ? _this.params.data[1][item.id].value : item.value[0]
                        }
                        _this.fileds.push({
                            ...filedsData,
                            show_type_code: item.show_type * 1,
                        })

                    }
                    _this.productData[item.id] = {
                        attr_id: item.id,
                        value: '',
                        label: item.title,
                        sort: item.sort,
                        is_must: item.is_must,
						maxlength:20
                    }
                })
            }
			this.fileds.sort((a, b)=>{
			  return a.sort > b.sort;
			});
        },
        onclickBtn({
            type,
            rowIndex,
            tableName
        }) {

        },
        onchange({
            name,
            value
        }) {
            if (name.indexOf('attr_') !== -1) {
                let id = name.slice(5);
                this.productData[id].value = value;
				this.$emit("onchange", {
	                name: 1,
	                data: this.productData
	            });
            }else if(name='alias_name'){
				this.alias_name.value = value
				this.$emit("onchange", {
	                name: 0,
	                data: {alias_name:this.alias_name}
	            });
			}

        },
        onsubmit(form) {

        },
        oncancel() {

        },
    },
    props: {
        params: {
            type: Object,
            default: function() {
                return {}
            }
        },
        op: '',
    },

    created() {
        if (util.getOp(this) == 'insert') {
				this.getUnitData(this.$route.query.top_product_id)
        } else {
			if(this.editData.attr.length>0){
				this.getStateData()
			}else{
				this.getUnitData(this.editData.top_product_id)
			}
			this.getOldName()
        }
    },
}
</script>
<style scoped lang="less">
@import "../../../common/style/mixin";

.ui.form .filed {
    margin-bottom: 10px;
}

.ui.table {
    width: auto;
}

.search-items {
    max-height: 100px;
    width: 250px;
    border: 1px solid rgba(34, 36, 38, .1);
    overflow: auto;
    padding: 0;
    &-item {
        margin: 0;
        padding: 0;
        list-style: none;
        padding: 10px;
        font-size: 12px;
        &:hover {
            background-color: rgba(34, 36, 38, .1);
        }
    }
}
</style>
